<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="stylesheet" href="../static/layui/css/layui.css">
    <style>
        body {
            background: #f6f6f6;
            background: linear-gradient(135deg, #7367F0, #CE9FFC);
            min-height: 100vh;
        }
        .login-container {
            margin-top: 7% !important;
        }
        .layui-card {
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(0,0,0,0.1);
        }
        .layui-card-header {
            height: 60px;
            line-height: 60px;
            text-align: center;
            font-size: 20px;
            font-weight: bold;
            color: #333;
            border-bottom: 1px solid #f0f0f0;
        }
        .layui-card-body {
            padding: 30px;
        }
        .layui-form-label {
            font-weight: 500;
        }
        .layui-input {
            height: 45px;
            border-radius: 4px;
        }
        .layui-btn {
            height: 45px;
            line-height: 45px;
            border-radius: 4px;
            padding: 0 25px;
        }
        .layui-form-select dl {
            border-radius: 4px;
        }
        .login-title {
            text-align: center;
            color: #fff;
            font-size: 28px;
            margin-bottom: 30px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
        }
    </style>
</head>
<body>
    <div class="layui-container login-container">
        <h1 class="login-title">成绩管理系统</h1>
        <div class="layui-row">
            <div class="layui-col-md4 layui-col-md-offset4">
                <div class="layui-card">
                    <div class="layui-card-header">用户登录</div>
                    <div class="layui-card-body">
                        <form class="layui-form" action="">
                            <div class="layui-form-item">
                                <label class="layui-form-label">账号</label>
                                <div class="layui-input-block">
                                    <input type="text" name="account" required lay-verify="required" placeholder="请输入账号" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">密码</label>
                                <div class="layui-input-block">
                                    <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">角色</label>
                                <div class="layui-input-block">
                                    <select name="role" lay-verify="required">
                                        <option value="">请选择角色</option>
                                        <option value="0">管理员</option>
                                        <option value="1">教师</option>
                                        <option value="2">学生</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button class="layui-btn" lay-submit lay-filter="login">登录</button>
                                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                                    <button type="button" class="layui-btn layui-btn-normal" id="registerBtn">注册</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 注册表单模板 -->
    <script type="text/html" id="registerForm">
        <form class="layui-form" style="margin: 20px;">
            <div class="layui-form-item">
                <label class="layui-form-label">账号</label>
                <div class="layui-input-block">
                    <input type="text" name="account" required lay-verify="required" placeholder="请输入账号" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-block">
                    <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">性别</label>
                <div class="layui-input-block">
                    <input type="radio" name="sex" value="1" title="男" checked>
                    <input type="radio" name="sex" value="2" title="女">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="register">注册</button>
                </div>
            </div>
        </form>
    </script>

    <script src="../static/layui/layui.js"></script>
    <script>
        layui.use(['form', 'layer'], function(){
            var form = layui.form;
            var layer = layui.layer;
            var $ = layui.$;
            
            // 设置全局 Ajax 默认值
            $.ajaxSetup({
                xhrFields: {
                    withCredentials: true    // 允许发送跨域凭证
                },
                crossDomain: true
            });
            
            // 登录表单提交
            form.on('submit(login)', function(data){
                $.ajax({
                    url: 'http://localhost:8050/api/backend/user/login',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify(data.field),
                    success: function(res){
                        if(res.code === 200){
                            layer.msg('登录成功');
                            var baseUrl = 'http://localhost:8050/api';
                            switch(res.data.role){
                                case 0:
                                    window.location.href = baseUrl + '/page/admin';
                                    break;
                                case 1:
                                    window.location.href = baseUrl + '/page/teacher';
                                    break;
                                case 2:
                                    window.location.href = baseUrl + '/page/student';
                                    break;
                            }
                        }else{
                            layer.msg(res.message);
                        }
                    }
                });
                return false;
            });

            // 注册按钮点击事件
            $('#registerBtn').on('click', function(){
                layer.open({
                    type: 1,
                    title: '学生注册',
                    content: $('#registerForm').html(),
                    area: ['500px', '400px'],
                    skin: 'layui-layer-molv',
                    success: function(layero){
                        form.render('radio');
                        $(layero).find('.layui-input').css('border-radius', '4px');
                        $(layero).find('.layui-btn').css('border-radius', '4px');
                    }
                });
            });

            // 注册表单提交
            form.on('submit(register)', function(data){
                $.ajax({
                    url: 'http://localhost:8050/api/backend/user/register',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify(data.field),
                    success: function(res){
                        if(res.code === 200){
                            layer.msg('注册成功，请登录');
                            layer.closeAll('page');
                        }else{
                            layer.msg(res.message);
                        }
                    }
                });
                return false;
            });
        });
    </script>
</body>
</html> 